<template>
  <div class="app-container">
      <div class="clearfix title">
        <span>参数配置</span>
        <div class="fr clearfix buttonBox new-refrech">
          <el-button
              class="btn-size fl"
              icon="el-icon-refresh"
              title="刷新"
              @click="refresh">
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%"
        class="config-table table-out-border">
        <el-table-column label="字段" prop="name">
        </el-table-column>
        <el-table-column label="当前值">
          <template slot-scope="scope">
            <template v-if="typeof scope.row.showValue==='object'">
             <template v-for="(value,index) in scope.row.showValue">
              {{value}} <span v-if="index !== scope.row.value.length-1" :key="index">~</span>
             </template>
            </template>
            <span v-else>{{scope.row.showValue }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editForm(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-wrapper">
        <config-dialog :row="row" :showDialog="showDialogPar" 
          v-on:listenToChildEvent="showFromChild" ref="childMethod"></config-dialog>
      </div>
   </div>

</template>

<script>
import { queryConfig } from '@/api/parameter'
import { cloneObj } from '@/utils/common.js'
import configDialog from './components/configDialog.vue'
export default {
  components: {
    configDialog
  },
  data() {
    return {
      loading: true,
      loadingBtn: false,
      dialogFormVisible: false,
      tableData: [],
      totalCount: 0,
      queryEdit: [],
      row: {},
      showDialogPar: false
    }
  },
  filters: {
    isOpenFilter(item) {
      const itemMap = {
        '1': '是',
        '0': '否'
      }
      return itemMap[item]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      queryConfig().then(res => {
        this.loading = false
        this.resData = res.data
        this.totalCount = res.data.totalCount
        this.tableData = res.data
        this.handleData(this.resData)
      }).catch(error => {
        this.loading = false
        console.log('error=' + error)
      })
    },
    handleData(arr) {
      const arr2 = arr
      const nameArr = [
        { code: 'minMaxHour', name: '交易时间（最小~最大）（小时）' },
        { code: 'minMaxAge', name: '年龄区间（最小~最大）(岁)' },
        { code: 'minMidMaxScore', name: '反欺诈区间值（最小~中间~最大）（分数）' },
        { code: 'minMidMaxLimitAmt', name: '绑卡额度（最小~中间~最大)（单位:元）' },
        { code: 'randomAmt', name: '绑卡额度随机数（元）' },
        { code: 'rate2', name: '两笔费率（％）' },
        { code: 'fixedFee2', name: '两笔固定费用' },
        { code: 'rate', name: '三笔费率（％）' },
        { code: 'fixedFee', name: '三笔固定费用' },
        { code: 'addressCount', name: '通讯录最低数' },
        { code: 'isOpen', name: '是否开放交易' },
        { code: 'intervalTime', name: '子订单执行间隔时间(分钟)' },
        { code: 'intervalRandomTime', name: '子订单执行随机间隔时间(分钟)' },
        { code: 'minMaxAmount', name: '订单金额（最小~最大）（单位:元）' },
        { code: 'dayTime', name: '单日单卡交易次数' },
        { code: 'monthTimes', name: '单月单卡交易次数' },
        { code: 'autoOneRate', name: '自动补扣，第一次补扣比例' },
        { code: 'autoTwoRate', name: '自动补扣，第二次补扣比例' },
        { code: 'autoThreeRate', name: '自动补扣，第三次补扣比例' },
        { code: 'bondRate', name: '保证金比例（％）' },
        { code: 'subOrderHour', name: '子订单交易结束时间（当天时间:HH）' },
        { code: 'delayTime', name: '交易推迟时间（分）' },
        { code: 'twoInterval', name: '两笔交易间隔时间' },
        { code: 'threeInterval', name: '三笔交易间隔时间' },
        { code: 'randomtime', name: '随机间隔时间' },
        { code: 'queryTime', name: '交易超时后自动查询间隔时间' }
      ]
      // 允许子订单交易时间
      const hourObj = {
        code: 'minMaxHour',
        value: [],
        showValue: [],
        name: '允许子订单交易时间',
        base: []
      }
      // 允许子订单交易时间
      const ageObj = {
        code: 'minMaxAge',
        value: [],
        showValue: [],
        name: '年龄区间',
        base: []
      }
      const limitAmtObj = {
        code: 'minMidMaxLimitAmt',
        value: [],
        showValue: [],
        name: '绑卡额度',
        base: []
      }
      const scoreObj = {
        code: 'minMidMaxScore',
        value: [],
        showValue: [],
        name: '评分',
        base: []
      }
      const amountObj = {
        code: 'minMaxAmount',
        value: [],
        showValue: [],
        name: '订单金额',
        base: []
      }
      for (const item of arr) { // 初步处理获得的数据
        item.showValue = item.value
        item.base = []
        const base = cloneObj(item)
        item.base[0] = base
        // 允许子订单交易时间
        if (item.code === 'minHour' || item.code === 'maxHour') {
          if (item.code === 'minHour') {
            hourObj.base.splice(0, 0, item)
            hourObj.value.splice(0, 0, item.value)
          }
          if (item.code === 'maxHour') {
            hourObj.base.splice(1, 0, item)
            hourObj.value.splice(1, 0, item.value)
          }
          hourObj.showValue = hourObj.value
        } else if (item.code === 'minAge' || item.code === 'maxAge') { // 年龄区间
          if (item.code === 'minAge') {
            ageObj.base.splice(0, 0, item)
            ageObj.value.splice(0, 0, item.value)
          }
          if (item.code === 'maxAge') {
            ageObj.base.splice(1, 0, item)
            ageObj.value.splice(1, 0, item.value)
          }
          ageObj.showValue = ageObj.value
        } else
        // 绑卡额度
        if (item.code === 'minLimitAmt' || item.code === 'midLimitAmt' || item.code === 'maxLimitAmt') {
          if (item.code === 'minLimitAmt') {
            limitAmtObj.base.splice(0, 0, item)
            limitAmtObj.value.splice(0, 0, (item.value * 100 / 10000).toFixed(2))
          }
          if (item.code === 'midLimitAmt') {
            limitAmtObj.base.splice(1, 0, item)
            limitAmtObj.value.splice(1, 0, (item.value * 100 / 10000).toFixed(2))
          }
          if (item.code === 'maxLimitAmt') {
            limitAmtObj.base.splice(2, 0, item)
            limitAmtObj.value.splice(2, 0, (item.value * 100 / 10000).toFixed(2))
          }
          limitAmtObj.value.sort(this.compare)
          // console.log('limitAmtObj', limitAmtObj.value)
          const showValue = limitAmtObj.value
          for (let item of showValue) {
            item = item.toString() + '元'
          }
          limitAmtObj.showValue = showValue

          // console.log('showValue', showValue)
          // console.log('limitAmtObj.showValue', limitAmtObj.showValue)
        } else

        // 反欺诈区间值
        if (item.code === 'minScore' || item.code === 'midScore' || item.code === 'maxScore') {
          if (item.code === 'minScore') {
            scoreObj.base.splice(0, 0, item)
            scoreObj.value.splice(0, 0, item.value)
          }
          if (item.code === 'midScore') {
            scoreObj.base.splice(1, 0, item)
            scoreObj.value.splice(1, 0, item.value)
          }
          if (item.code === 'maxScore') {
            scoreObj.base.splice(2, 0, item)
            scoreObj.value.splice(2, 0, item.value)
          }
          scoreObj.value.sort(this.compare)
          // console.log('scoreObj==' + JSON.stringify(scoreObj.value))
          scoreObj.showValue = scoreObj.value
        } else
        // 订单金额
        if (item.code === 'minAmount' || item.code === 'maxAmount') {
          if (item.code === 'minAmount') {
            amountObj.base.splice(0, 0, item)
            amountObj.value.splice(0, 0, (item.value * 100 / 10000).toFixed(2))
            amountObj.showValue.splice(0, 0, (item.value * 100 / 10000).toFixed(2).toString() + '元')
          }
          if (item.code === 'maxAmount') {
            amountObj.base.splice(1, 0, item)
            amountObj.value.splice(1, 0, (item.value * 100 / 10000).toFixed(2))
            amountObj.showValue.splice(1, 0, (item.value * 100 / 10000).toFixed(2).toString() + '元')
          }
          amountObj.value.sort(this.compare)
          // amountObj.showValue = amountObj.value
        } else if (item.code === 'fixedFee') {
          item.showValue = (item.value * 100 / 10000).toFixed(2).toString() + '元'
        } else if (item.code === 'fixedFee2') {
          item.showValue = (item.value * 100 / 10000).toFixed(2).toString() + '元'
        } else if (item.code === 'isOpen') {
          item.value === '1' ? item.showValue = '开放' : item.showValue = '禁止'
        } else if (item.code === 'isOpen') {
          item.value === '1' ? item.showValue = '开启' : item.showValue = '关闭'
        } else if (item.code === 'randomAmt') {
          item.showValue = (item.value * 100 / 10000).toFixed(2).toString() + '元'
        }
      }

      arr2.push(hourObj)
      arr2.push(ageObj)
      arr2.push(limitAmtObj)
      arr2.push(scoreObj)
      arr2.push(amountObj)
      const arr3 = []
      for (const name of nameArr) {
        for (const item of arr2) {
          if (item.code === name.code) {
            item.name = name.name
            arr3.push(item)
          }
        }
      }
      console.log('arr', arr3)
      this.tableData = arr3
    },
    compare(x1, y1) {
      const x = parseFloat(x1)
      const y = parseFloat(y1)
      if (x < y) {
        return -1
      } else if (x > y) {
        return 1
      } else {
        return 0
      }
    },
    editForm(row) {
      this.showDialogPar = true
      this.row = row
      console.log('row', row)
      const base = row.base
      if (row.code === 'minMaxHour') {
        row.minHour = base[0].value
        row.maxHour = base[1].value
      } else if (row.code === 'minMaxAge') {
        row.minAge = base[0].value
        row.maxAge = base[1].value
      } else if (row.code === 'minMaxAmount') {
        row.minAmount = parseFloat((base[0].value) * 100 / 10000)
        row.maxAmount = parseFloat((base[1].value) * 100 / 10000)
      } else if (row.code === 'minMidMaxScore') {
        row.minScore = base[0].value
        row.midScore = base[1].value
        row.maxScore = base[2].value
      } else if (row.code === 'minMidMaxLimitAmt') {
        row.minLimitAmt = parseFloat((base[0].value) * 100 / 10000)
        row.midLimitAmt = parseFloat((base[1].value) * 100 / 10000)
        row.maxLimitAmt = parseFloat((base[2].value) * 100 / 10000)
      } else {
        row[row.code] = row.value
      }
      this.$refs.childMethod.handleData(row)
    },
    // 子组件,对话框关闭,且重新获取用户list
    showFromChild(data) {
      this.fetchData()
    },
    refresh() { // 刷新按钮点击事件
      this.fetchData()
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-form-item{
  margin-bottom: 10px;
  .el-form-item{
    margin-bottom:0
  }
}
.title{
  font-size: 22px;
}
.btn-rows {
  text-align: center;
  padding-top:20px;
  .el-button{
    
  }
}

.title{
  margin-bottom: 20px;
}
</style>


